<template>
    <div class="app-container"> 
        <el-row  style="width:97%;box-sizing: inherit; padding-bottom: 10px;">
            <el-col :span="5">
                <div class="grid-content bg-purple" style="color: #AAA;">
                    编号：
                        <el-input style="width: 150px" clearable v-model="form.material_no" placeholder="请输入物料编号"
                      autocomplete="off"/> 
                </div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple" style="color: #AAA;">
                    名称：
                        <el-input style="width: 150px" clearable v-model="form.material_name" placeholder="请输入物料名称"
                      autocomplete="off"/> 
                </div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light" style="color: #AAA;">
                    功能：
                    <el-select  style="width:150px;" v-model="form.nw_type_id" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in type_list"
                        :key="item.type_id"
                        :label="item.type_name"
                        :value="item.type_id">
                    </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple" style="color: #AAA;">
                    图样：
                    <el-select style="width:150px;" clearable filterable v-model="form.nw_image_id" placeholder="请选择">
                        <el-option
                        v-for="item in image_list"
                        :key="item.image_id"
                        :label="item.image_name"
                        :value="item.image_id">
                        </el-option>
                    </el-select>
                </div>
            </el-col> 
            
            <el-col :span="4">
                <div class="grid-content bg-purple-light" style="color: #AAA;">
                  </div>
                </el-col> 
            </el-row> 
        <el-row style="padding-bottom:1%"> 
          <el-col :span="6">
                <div class="grid-content bg-purple-light" style="color: #AAA;">
                    库存状态：
                    <el-select  style="width:150px;" v-model="form.stock_state" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in stock_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light" style="color: #AAA;">
                    商品状态：
                    <el-select  style="width:150px;" v-model="form.sale_state" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in sale_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="8">
                 
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light" style="color: #AAA;">
                  <el-button type="primary" @click="adddialog=true" icon="el-icon-circle-plus-outline" circle></el-button>
                    <el-button icon="el-icon-search" type="primary" style="margin-left: 10px" circle @click="getlistdata(true)"></el-button> 
                </div>
                </el-col> 
        </el-row> 
 
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
                header-cell-class-name="tableheader">
        <el-table-column align="center" label="物料编号" width="100">
          <template slot-scope="scope">
            {{ scope.row.material_no }}
          </template>
        </el-table-column> 
        <el-table-column align="center" label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.material_name }}
          </template>
        </el-table-column>  
        <el-table-column align="center" label="样图" width="60">
                <template slot-scope="scope">
                    <el-image 
                            style="width: 40px; height: 40px"
                            :src="scope.row.image_path"
                            :preview-src-list="[scope.row.image_path]">
                        </el-image> 
                </template>
            </el-table-column>
        <el-table-column align="center" label="类型" width="70">
          <template slot-scope="scope">
            {{ scope.row.type_name }}
          </template>
        </el-table-column>  
        <el-table-column align="center" label="库存状态" width="80">
          <template slot-scope="scope">
            {{ scope.row.stock_state_str }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="产品状态" width="80">
          <template slot-scope="scope">
            {{ scope.row.sale_state_str }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="预警值" width="60">
          <template slot-scope="scope">
            {{ scope.row.safe_count }}
          </template>
        </el-table-column>   
        <!--<el-table-column align="center" label="库存" width="50">
          <template slot-scope="scope">
            {{ scope.row.now_count }}
          </template>
        </el-table-column> --> 
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="set_warehouse(scope.row)" icon="el-icon-house">库存</el-button>
            <el-button type="primary" size="mini" @click="openedit(scope.row)" icon="el-icon-edit">编辑</el-button>
            <el-button type="danger"  size="mini" @click="delbtn(scope.row)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      
      <div class="pagination">
        <el-pagination
          style="text-align: center"
          layout="prev, pager, next"
          small
          :current-page="form.page"
          :page-size="form.pagesize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      
      <el-dialog title="保存物料信息" :visible.sync="adddialog" width="35%" :close-on-click-modal="false">
        <el-form :model="dialogform" ref="dialogform" :rules="rule" label-width="120px">
          <el-form-item label="选择物料功能：" prop="nw_type_id"> 
            <el-select  style="width:150px;" v-model="dialogform.nw_type_id" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in type_list"
                        :key="item.type_id"
                        :label="item.type_name"
                        :value="item.type_id">
                    </el-option>
                    </el-select>
          </el-form-item>
          <el-form-item label="选择物料图样：" prop="nw_image_id"> 
            <el-select  style="width:150px;" v-model="dialogform.nw_image_id" filterable clearable placeholder="请选择" @change="dialogform_image_change">
                        <el-option
                        v-for="item in image_list"
                        :key="item.image_id"
                        :label="item.image_name"
                        :value="item.image_id">
                        </el-option>
                    </el-select>
          </el-form-item>  
          <el-form-item> 
            <el-image :src="dialogform.image_path" style="max-width:100px;"
            :preview-src-list="[dialogform.image_path]">
                <div slot="placeholder" class="image-slot">
                    wait<span class="dot">...</span>
                </div>
            </el-image>
          </el-form-item>   
          <el-form-item label="库存状态" prop="stock_state"> 
            <el-select  style="width:150px;" v-model="dialogform.stock_state" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in stock_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="物料状态" prop="sale_state"> 
            <el-select  style="width:150px;" v-model="dialogform.sale_state" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in sale_list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="预警库存设置:" prop="safe_count">
                    <el-input type="number" placeholder="请输入预警库存" style="width:200px;" v-model="dialogform.safe_count" autocomplete="off"/>
                </el-form-item>  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addbtn">保存</el-button>
        </div>
      </el-dialog>  


      <el-dialog title="设置库存信息" :visible.sync="set_warehouse_dialog" width="35%" :close-on-click-modal="false">
        <el-form :model="set_warehouse_dialogform" ref="set_warehouse_dialogform" :rules="rule" label-width="120px">
          <el-form-item label="选择所在库位：" prop="warehouse_tag"> 
            <el-select  style="width:150px;" v-model="set_warehouse_dialogform.warehouse_tag" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in warehouse_list"
                        :key="item"
                        :label="item"
                        :value="item">
                    </el-option>
                    </el-select>
          </el-form-item>
          <el-form-item label="库存数量:" prop="now_count">
                    <el-input type="number" placeholder="请输入库存数量" style="width:200px;" v-model="set_warehouse_dialogform.now_count" autocomplete="off"/>
                </el-form-item>  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="set_warehouse_func">保存</el-button>
        </div>
      </el-dialog>  



    </div>
  </template>
  
  <script>  
  import * as imageConversion from 'image-conversion' 
  export default { 
    data() {
      return { 
        btnloading: false,  
        form: {
          material_no: '',
          nw_type_id:'',
          nw_image_id:'',
          material_name:'',
          page: 1,
          pagesize: 20
        }, 
        dialogform: {
            material_id: '',
            nw_type_id: '', 
            nw_image_id:'',
            image_path:'',
            stock_state:0,
            sale_state:0,
            safe_count:0
        }, 
        rule: {
          nw_type_id: [
            {required: true, message: '此项为必填项'},
          ], 
          nw_image_id: [
            {required: true, message: '此项为必填项'},
          ], 
        },
        list: null,
        alllist: null,
        total: 0,
        listLoading: true,
        adddialog: false,
        editdialog: false,
        addicondia: false,
        editicondia: false,
        image_list:[],
        type_list:[],
        set_warehouse_dialog:false,
        set_warehouse_dialogform:{
            material_id:'',
            warehouse_tag:'',
            now_count:0
        },
        warehouse_list:[
            '左1层',
            '左2层',
            '左3层', 
            '左4层', 
            '中1层',
            '中2层',
            '中3层', 
            '中4层',
            '右1层',
            '右2层',
            '右3层',
            '右4层'
        ],
        stock_list:[
          {id:1,name:"充裕"},
          {id:2,name:"告警"},
          {id:3,name:"就剩一个"},
          {id:4,name:"无货"},
        ],
        sale_list:[
          {id:0,name:"正常"},
          {id:1,name:"清库存"},
          {id:2,name:"停售"},
        ],
      };
    }, 
    created() { 
      this.getlistdata(); 
      this.get_typelist();
    },
    methods: {
      getlistdata(isquery) {
        this.listLoading = true;
        if (isquery === true) {
          this.form.page = 1
        }
        this.$post(this.$api + '/nw/get_nw_material_pagelist', this.form, false, this)
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.list = res.rows;
              this.total = res.total;
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      }, 
      addbtn() {
        this.listLoading = true;
        this.$post(this.$api + '/nw/save_nw_material', this.dialogform)
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              });
              this.adddialog = false;
              this.dialogform = { 
                material_id: '',
                nw_type_id: '', 
                nw_image_id:'',
                image_path:'',
                stock_state:0,
                sale_state:0 
              };
              this.getlistdata(); 
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      },
      openedit(item) {
            this.adddialog = true;
            for(var i in this.dialogform)
            { 
                 this.dialogform[i] = item[i];  
            } 
      }, 
      delbtn(item) {
        this.$confirm('确认删除？?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          this.$get(this.$api + '/nw/del_nw_material', {
            'material_id': item.material_id
          })
            .then((res) => {
              this.listLoading = false;
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success'
                });
                this.getlistdata();
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
        })
      },
      handleSizeChange(v) {
        this.form.pagesize = v;
        this.getlistdata();
      },
      handleCurrentChange(v) {
        this.form.page = v;
        this.getlistdata();
      },
      get_typelist(){
            this.$get(this.$api + '/nw/get_simple_select')
                .then((res) => { 
                    if (res.code === 0) {
                        this.type_list = res.data.types; 
                        this.image_list = res.data.images; 
                    } else {
                        this.$notify({
                            title: '获取基础数据失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
      },
        dialogform_image_change(image_id){
            var list =  this.image_list;
            console.log(image_id);
            console.log(list);
            for(var i =0;i<list.length;i++)
            {
                if(image_id == list[i].image_id)
                {
                    console.log(list[i]);
                    this.dialogform.image_path = list[i].image_path;
                    break;
                }
            }
      },
      set_warehouse(row){
        this.set_warehouse_dialog = true;
        for(var i in this.set_warehouse_dialogform)
            { 
                 this.set_warehouse_dialogform[i] = row[i];  
            } 
      },
      set_warehouse_func(){
        this.listLoading = true;
        this.$post(this.$api + '/nw/set_warehouse', this.set_warehouse_dialogform)
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              });
              this.set_warehouse_dialog = false;
              this.set_warehouse_dialogform = { 
                material_id:'',
                warehouse_tag:'',
                now_count:0
              };
              this.getlistdata(); 
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      }
    }
  };
  </script>
  
  